<template>
	<view>
		<view>
			<remind-carinfo :dataBean="dataBean"></remind-carinfo>
			<view class="item"  style="padding: 20rpx;">
				<u-form class="item" :model="inspection" ref="uform"
					label-width="auto">


					<u-form-item label="本次年检时间" @click="pickerShow(1)" borderBottom>
						<u-input v-model="inspection.thisTime" inputAlign="right" disabled disabledColor="#ffffff" border="none"
							placeholder="请选择本次年检时间" type="select" :select-open="actionSheetShow">
						</u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item label="下次年检时间" @click="pickerShow(2)" borderBottom>
						<u-input v-model="inspection.nextTime" inputAlign="right" disabled disabledColor="#ffffff" border="none"
							placeholder="请选择下次年检时间" type="select" :select-open="actionSheetShow">
						</u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item label="年检费用" borderBottom>
						<u-input v-model="inspection.inspectionAmount" type="number" inputAlign="right" border="none"
							placeholder="请输入费用">
						</u-input>
					</u-form-item>

					<u-form-item label="年审代理人" borderBottom>
						<u-input v-model="inspection.inspectionAgent" inputAlign="right" border="none" placeholder="请输入年审代理人">
						</u-input>
					</u-form-item>

					<u-form-item label="备注" borderBottom>
						<u-input v-model="inspection.remark" inputAlign="right" border="none" placeholder="请输入备注">
						</u-input>
					</u-form-item>

					<text style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">年检照片</text>

					<lr-upload @on-change='onListChange' :tag="1" :objType="7"></lr-upload>



				</u-form>
			</view>

			<!-- 开始时间 -->
			<u-datetime-picker
			 v-model="value1" :maxDate="value2"
			 mode="date" :show="startTimeShow" @confirm="pickerConfim()" @cancel="startTimeShow=false"></u-datetime-picker>
			<!-- 结束时间 -->
			<u-datetime-picker
			 v-model="value2" :minDate="value1"
			 mode="date" :show="finishTimeShow" @confirm="pickerConfim()" @cancel="finishTimeShow=false"></u-datetime-picker>




			<u-modal ref="uModal" :show="showModal" :show-cancel-button="true" show-title="" @confirm="confirm" @cancel="showModal=false"
				content="确定提交？">
				<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
				<!-- <view class="warp" style="margin: 30rpx;" v-if="contentSlot">
				<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;"
					mode="widthFix"></image>
			</view> -->
				<!-- #endif -->
			</u-modal>
		</view>
		
		<view style="height: 100rpx;"></view>

		<view class="button-container">
			<button class="btn-item" @click="commit">提 交</button>
		</view>
	</view>
</template>

<script>
	import remindCarinfo from '../../components/remind-carinfo.vue';
	import lrUpload from '../../components/global/lr-upload.vue';

	export default {
		components: {
			remindCarinfo,
			lrUpload,
		},

		data() {
			return {
				value1:Number(new Date()),
				value2:Number(new Date())+12*30*24*3600*1000,
				mode: '',
				dataBean: {
					vehicle:{},
					orderCar:{},
				},
				carId: '',
				inspectionId: '',
				showModal: false,
				type: 0,
				startTimeShow: false,
				finishTimeShow: false,
				inspection: {
					thisTime: '',
					nextTime: '',
					inspectionAmount: '',
					inspectionAgent: '',
					remark: '',
					attachment: [],
				}
			}
		},
		onLoad(op) {
			this.carId = op.carId;
			this.inspectionId = op.inspectionId;

			this.$u.api.inspectionDetail({
				carId: op.carId,
				// componentId: op.inspectionId >= 0 ? op.inspectionId : null
			}).then(
				res => {
					this.dataBean = res;
				}

			)
		},
		methods: {
			pickerShow(type) {
				this.type = type;
				switch (type) {
					case 1:
						this.startTimeShow = true;
						this.mode = 'time';
						break
					case 2:
						this.finishTimeShow = true;
						this.mode = 'time';
						break
				}
			},
			pickerConfim(e) {
				// if (this.mode == 'time') {
					let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
					if (this.type == 1) {
						this.startTimeShow = false;
						this.inspection.thisTime = timeStr;
					} else if (this.type == 2) {
						this.finishTimeShow = false;
						this.inspection.nextTime = timeStr;
					}
				// }
			},

			commit() {
				// this.showModal = true;
				this.confirm()
			},

			confirm() {
				// this.showModal = false;
				let that = this
				uni.showModal({
				    content: '确定提交吗?',
				    success(result) {
				       if (result.confirm) {

							that.$u.api.addInspection({
								vehicle: that.dataBean.vehicle,
								inspection: that.inspection,
								// orderCar:
							}).then(
								res => {
									uni.showToast({
										title: '提交成功',
										icon: 'none'
									});
									uni.$emit('yearcheck', true)
									setTimeout(()=>{
										uni.navigateBack()
									}, 1000)
								}
							);

				       }
				    }
				})
				
				
			},

			onListChange(tag, list, objList) {
				if (tag == 1) {
					this.inspection.attachment = objList;
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
